<template>
  <!-- <div>
    用户新增页面
  </div> -->
  <div class="app-container">
    <el-form label-width="100px" width="200">
        <el-form-item label="账号">
          <el-input v-model="user.userAccount"/>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="user.userName"/>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="user.userAge"/>
        </el-form-item>
        <el-form-item label="性别">
          <!-- <el-input v-model="admin.adminSex"/> -->
          <el-select v-model="user.currSexVal" placeholder="请选择">
            <el-option
              v-for="item in user.userSex"
              :key="item.key"
              :label="item.val"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="角色">
          <el-input v-model="admin.adminRole"/>
        </el-form-item> -->
        <el-form-item label="角色">
          <el-select v-model="user.currRoleVal" placeholder="请选择">
            <el-option
              v-for="item in user.userRole"
              :key="item.key"
              :label="item.val"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="user.userPhone"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveUserInfo()">保存</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import user from '@/api/user';
export default {
    name:'UserSave',
    data(){
    return {
      user:{
        userAccount:'',
        userName:'',
        userAge:'',
        userSex:[
          {
            key:1,
            val:'男'
          },
          {
            key:2,
            val:'女'
          }
        ],
        userRole:[
          {
            key:1,
            val:'管理员'
          },
          {
            key:2,
            val:'超级管理员'
          },
          {
            key:3,
            val:'用户'
          }
        ],
        //当前选中的角色
        currRoleVal:'',
        //当前选中的性别
        currSexVal:'',
        userPhone:''
      }
    }
  },
  methods:{
    saveUserInfo(){
      console.log('添加的数据user：', this.user)
      let userDto = {
        userAccount:this.user.userAccount,
        userName:this.user.userName,
        userAge:this.user.userAge,
        currUserSex:this.user.currSexVal,
        currUserRole:this.user.currRoleVal,
        userPhone:this.user.userPhone
      }
      console.log('待添加的数据user：', this.user)
      user.saveUser(userDto).then(
        response => {
          console.log('用户添加响应数据：', response)
          let resData = response.data.data
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == '200' && resData){
            //提示
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            //跳转列表页面，使用路由跳转方式实现
            this.$router.push({path:'/user_list'})
          } else {
            //异常提示
            this.$message({
                type: 'error',
                message: resMsg
            })
          }
        },
        error => {
          console.error('用户添加异常信息：', error)
        }
      )
    }
  }
}
</script>

<style scoped>
  .el-input{
    width: 223px;
  }
</style>